<template>
  <div class="box RegBox">
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="main">
      <h1>欢迎注册每日优鲜</h1>
      <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        clearable
        placeholder="用户名"
        :right-icon="unTest"
      />
      <van-field
        v-model="tel"
        clearable
        name="tel"
        placeholder="手机号"
        :right-icon="telTest"
      />
      <van-field
        v-model="sms"
        clearable
        name="sms"
        placeholder="请输入短信验证码"
        :right-icon="smsTest"
      >
        <template #button>
          <van-button size="small" type="primary" :disabled="telSms" @click="onSendSms">{{smsTitle}}</van-button>
        </template>
      </van-field>
      <van-field
        v-model="password"
        clearable
        name="password"
        placeholder="请输入密码"
        :right-icon="pasTest"
      />
      <div style="margin: 16px;margin-top:24px">
        <van-button round block type="info" native-type="submit" :disabled="allTest">提交</van-button>
      </div>
    </van-form>
    </div>
    <router-link to="/login"><p>已有账号？去登录</p></router-link>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, Toast } from 'vant'
import { sendSms, register } from '@/api/request.js'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
export default {
  data () {
    return {
      smsTitle: '发送验证码',
      username: '',
      tel: '',
      sms: '',
      password: ''
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      this.$router.push('/login')
    },
    onSendSms () {
      let time = 10
      this.smsTitle = time + 's后重新发送'
      const timeId = setInterval(() => {
        if (time === 1) {
          clearInterval(timeId)
          this.smsTitle = '重新发送验证码'
        } else {
          time--
          this.smsTitle = time + 's后重新发送'
        }
      }, 1000)
      sendSms({
        tel: this.tel * 1
      }).then(data => {
        console.log(data.data.msg)
        switch (data.data.code) {
          case 200:
            Toast('验证码发送成功')
            break
          case 201:
            Toast('验证码再次发送成功')
            break
          case 202:
            Toast('该手机号已被注册')
            break
          case 203:
            Toast(data.data.title)
            break
        }
      })
    },
    onSubmit (v) {
      const that = this
      console.log(v.username, v.password, v.tel, v.sms)
      register({
        username: v.username,
        password: v.password,
        tel: v.tel,
        code: v.sms
      }).then(data => {
        console.log(data.data)
        switch (data.data.code) {
          case 200:
            Toast({
              message: '注册成功',
              onClose () {
                that.$router.push('/login')
              }
            })
            break
          case 201:
            Toast('该用户名已被注册')
            break
          case 202:
            Toast('该手机号已被注册')
            break
          case 203:
            Toast('验证码错误')
            break
          case 204:
            Toast('请先发送验证码')
            break
        }
      })
    }
  },
  computed: {
    unTest () {
      if (/^[a-zA-Z0-9_-]{1,16}$/.test(this.username)) {
        return 'success'
      }
      return ''
    },
    telTest () {
      if (/^1\d{10}$/.test(this.tel)) {
        return 'success'
      }
      return ''
    },
    smsTest () {
      if (/^\d{5,6}$/.test(this.sms)) {
        return 'success'
      }
      return ''
    },
    pasTest () {
      if (/^[a-zA-Z0-9_-]{3,11}$/.test(this.password)) {
        return 'success'
      }
      return ''
    },
    telSms () {
      return !(this.telTest !== '' && (this.smsTitle === '发送验证码' || this.smsTitle === '重新发送验证码'))
    },
    allTest () {
      return this.unTest === '' || this.telTest === '' || this.smsTest === '' || this.pasTest === ''
    }
  }
}
</script>

<style lang="scss">
.RegBox {
  .van-nav-bar__content {
    height: 0.6rem;
    .van-nav-bar__left {
      padding-left: 0.21rem;
      .van-icon {
        color: #272727;
      }
      .van-nav-bar__arrow {
        font-size: 0.21rem;
      }
    }
  }
  .van-hairline--bottom::after {
    border-bottom-width: 0;
  }
  .main{
    padding: 0.38rem 0.35rem;
    h1 {
      font-size: 0.23rem;
      line-height: 0.23rem;
      color: #474246;
    }
    .van-form{
      margin-top: 0.2rem;
      .van-cell{
        line-height: 0.28rem;
        .van-field__control{
          color: #8b8788;
          font-size: 0.15rem;
        }
      }
      .van-button--primary{
        background: none;
        border: 1px solid #666;
        border-radius: 10px;
        span{
          font-size: 0.15rem;
          color: #bbbbbb;
        }
      }
      .van-button--info{
        background-color: #ffb1dd;
        border: none;
        .van-button__text{
          font-size: 0.17rem;
        }
      }
    }
  }
  p{
    font-size: 0.15rem;
    color: #ffb1dd;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0.3rem;
    text-align: center;
  }
}
</style>
